<template>
  <div class="dischargeStatistics">
    <div class="title"></div>
    <div id="chart1" class="chart1" style="width: 100%;height: 100%;"/>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/utils/mixins/resize'

export default {
  name: 'ChatStatistics',
  mixins: [resize],
  props: {
    chatStatisticsData: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  watch: {
    chatStatisticsData: {
      handler(val) {
        this.$nextTick(() => {
          this.getDataStructure(val)
        })
      },
      deep: true
    }
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.drawLine()
  //   })
  // },
  methods: {
    getDataStructure(data) {
      const xAxis = []
      const yAxis = []
      if (!data.length) {
        return false
      }
      data.forEach(item => {
        xAxis.push(item.stname)
        yAxis.push(item.number)
      })
      this.drawLine(xAxis, yAxis)

    },
    drawLine(xAxis, yAxis) {
      this.myChart = echarts.init(document.getElementById('chart1'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis,
            axisTick: {
              alignWithLabel: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0F6BB2',
                width: 1.5
              }
            },
            axisLabel: {
              show: true,
              // 字体颜色
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0F6BB2',
                width: 1.5
              }
            },
            axisLabel: {
              textStyle: {
                color: '#65FAFF'
              }
            }
          }
        ],
        series: [
          {
            name: '站点数量',
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              normal: {
                barBorderRadius: [25, 25, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#98C1FF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#65FAFF' // 100% 处的颜色
                }], false)
              }
            },
            data: yAxis
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dischargeStatistics {
  width: 100%;
  height: 200px;
  background: url(../../../assets/images/screen/chatBg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;

  .title {
    width: 100%;
    max-width: 400px;
    height: 50px;
    background: url(../../../assets/images/screen/title3.png) no-repeat;
    background-size: 100% 100%;

    position: absolute;
    top: -22px;
    left: 50%;
    transform: translate(-50%, 0);

  }
}
</style>
